<template>
  <div class="area-analysis-container">
    <div class="areaA">
      <el-row :gutter="20">
        <el-col :span="12"><div class="grid-content bg-purple">
          <div class="areaTitle">客源分析<span>（随右侧选择距离变化）</span></div>
          <div class="tableContainer">
            <el-table :data="pageResult" style="width: 100%" size="mini">
              <el-table-column
                prop="title"
                label="客源">
              </el-table-column>
              <el-table-column
                prop="tags"
                label="客源类型">
              </el-table-column>
            </el-table>
            <div class="paginationSet">
              <div class="pagination-container">
                <div class="toStart" @click="setCurrentPage">首页
                </div>
                <el-pagination background @current-change="pageChange"
                  layout="prev, pager, next"
                  :current-page.sync="currentPage"
                  :total="page">
                </el-pagination>
              </div>
            </div>
          </div>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">
          <div class="areaMap space-between" >
            <div style="display: flex;align-items: center; font-weight: bold;color:#333;">终端所处临近商圈分布地图</div>
            <div>
              <el-form :inline="true"  class="demo-form-inline single-form-inline" size="small">
                <el-radio-group  size="small" v-model="km" @change="timeSelect">
                  <el-radio-button label="1000">附近1公里</el-radio-button>
                  <el-radio-button label="2000">附近2公里</el-radio-button>
                  <el-radio-button label="3000">附近3公里</el-radio-button>
                  <el-radio-button label="5000">附近5公里</el-radio-button>
                  <el-radio-button label="10000">附近10公里</el-radio-button>
                </el-radio-group>
              </el-form>
            </div>
          </div>
          <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler" ak="tGGXVGSl72PejxGBpEQMfg65ll9euMd2">
          </baidu-map>
        </div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

    export default {
      name: "area-analysis",
      components:{
        BaiduMap
      },
      data(){
          return{
            selectDistance:'0',
            results:[],
            page:16,
            currentPage:1,
            center: {lng: 0, lat: 0},
            zoom: 3,
            pageResult:[],
            km:1000,
            instance:{},
            mp:{}
          }
      },
      props:['address'],
      methods:{
        pageChange(val){
          this.pageResult = this.results.slice((val-1)*10,val*10)
        },
        handler ({BMap, map}) {
          this.zoom = 15
          let demo = "成都市天府四街199号长虹科技大厦"
          let myGeo = new BMap.Geocoder();
          myGeo.getPoint(this.address, (point) => {
            if (point) {
              map.centerAndZoom(point, 15);
              map.enableScrollWheelZoom(true);
              map.addOverlay(new BMap.Marker(point));
              let mPoint = new BMap.Point(point.lng, point.lat);
              this.instance = {BMap, map}
              this.mp = mPoint
              this.allPoint(this.mp, this.instance )
            }else{
              alert("您选择地址没有解析到结果");
            }
          }, "成都市");
        },
        allPoint(mPoint,{BMap, map}){
          map.clearOverlays();
          let circle = new BMap.Circle(mPoint,Number(this.km),{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.2, strokeOpacity: 0.2});
          map.addOverlay(circle);
          let local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false},onSearchComplete : (res) => {
              res.map(item => {
                if(item.Ar[0]){
                  item.Ar[0].tags.toString()
                }
                this.results = [
                  ...this.results,
                  ...item.Ar
                ]
              })
              this.pageResult = this.results.slice(0,10)
              this.page = this.results.length
            }});
          local.searchNearby(['商场','写字楼','商城'],mPoint,Number(this.km));
        },
        timeSelect(){
          this.allPoint(this.mp, this.instance )
        },
        setCurrentPage(){
          this.pageResult = this.results.slice(0,10)
        }
      }
    }
</script>

<style scoped>
  .bm-view {
    width: 100%;
    height: 400px;
    margin-top: 15px;
  }
 .areaA{
   padding: 20px;
   box-sizing: border-box;
   padding-top: 6px;
 }
 .areaTitle{
   line-height: 32px;
   font-weight: bold;
   color: #333;
 }
 .areaTitle span{
   color: #999;
   font-size: 12px;
   font-weight: bold;
 }
 .areaMap{
    display: flex;
 }
</style>
